<template>
	<view>
		<view class="p-[16px] bg-[#FFFFFF] flex flex-row items-center">
			<u-avatar size="80" :src="store.user?.Avatar"></u-avatar>
			<view @click="toSetting" v-if="store.user" class="h-[80px] flex-1 mx-[16px] flex flex-col justify-around">
				<text class="text-[14px] text-[#333333]">{{store.user.UserName}}</text>
				<text class="text-[13px] text-[#999999]">{{store.user.NickName}}</text>
				<text class="text-[13px] text-[#333333]">等级：{{getLevel()}}</text>
			</view>
			<view v-else class="h-[80px] flex-1 mx-[16px] flex flex-col justify-center">
				<text @click="toLogin" class="leading-[80px] text-[14px] text-[#333333]">请登录</text>
			</view>
			<u-icon name="arrow-right" v-if="store.user" size="32" color="#999999" @click="toSetting"></u-icon>
			<u-icon name="arrow-right" v-else size="32" color="#999999" @click="toLogin"></u-icon>
		</view>
		<u-gap height="10"></u-gap>
		<view class="px-[16px] py-[10px] bg-[#FFFFFF]">
			<view class="text-[14px] text-[#333333] font-semibold">我的资产</view>
			<u-grid :border="false" @click="toDetail">
				<u-grid-item :customStyle="{padding:'10px 0'}">
					<u-text size="14" color="#333333" text="消费积分"></u-text>
					<u-count-to color="rgb(237,123,103)" separator="," duration="800"
						:endVal="store.user?.Amount ?? 0"></u-count-to>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'10px 0'}">
					<u-text size="14" color="#333333" text="绿色积分"></u-text>
					<u-count-to color="rgb(237,123,103)" separator="," duration="800"
						:endVal="store.user?.ServiceIntegral ?? 0"></u-count-to>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'10px 0'}">
					<u-text size="14" color="#333333" text="股权积分"></u-text>
					<u-count-to color="rgb(237,123,103)" separator="," duration="800"
						:endVal="store.user?.BonusIntegral ?? 0"></u-count-to>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'10px 0'}">
					<u-text size="14" color="#333333" text="待释放积分"></u-text>
					<u-count-to color="rgb(237,123,103)" separator="," duration="800"
						:endVal="store.user?.ReleaseIntergral ?? 0"></u-count-to>
				</u-grid-item>
				<!-- <u-grid-item :customStyle="{padding:'10px 0'}" v-if="false">
					<u-text size="14" color="#333333" text="可用积分"></u-text>
					<u-count-to color="rgb(237,123,103)" separator="," duration="800" :endVal="store.user?.ProfitIntegral ?? 0"></u-count-to>
				</u-grid-item> -->
			</u-grid>
		</view>
		<u-gap height="10"></u-gap>
		<view class="px-[16px] py-[10px] bg-[#FFFFFF]">
			<view class="text-[14px] text-[#333333] font-semibold">我的应用</view>
			<u-grid @click="onClick" :border="false" col="4" :custom-style="{marginTop:'10px'}">
				<!--0-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/order.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="我的订单"></u-text>
				</u-grid-item>
				<!--1-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/team.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="我的业绩"></u-text>
				</u-grid-item>
				<!--2-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/finance.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="财务管理"></u-text>
				</u-grid-item>
				<!--3-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/address.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="收货地址"></u-text>
				</u-grid-item>
				<!-- <u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/bankcard.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="银行卡"></u-text>
				</u-grid-item> -->
				<!--4-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/bankcard.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="充值登记"></u-text>
				</u-grid-item>
				<!--5-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/transform.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="绿色积分兑换"></u-text>
				</u-grid-item>
				<!--6-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/exchange.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="消费积分互转"></u-text>
				</u-grid-item>
				<!--7-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/scan.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="扫码注册"></u-text>
				</u-grid-item>
				<!--8-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/pay_qrcode.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="收款码"></u-text>
				</u-grid-item>
				<!--9-->
				<u-grid-item :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/scan.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="扫码付款"></u-text>
				</u-grid-item>
				<!-- <u-grid-item v-if="functions.ProfitExchange" name="7" :customStyle="{padding:'20px 0 10px'}">
					<u-icon size="30" name="/static/transform.svg"></u-icon>
					<u-text margin="10px 0 0 0" size="12" color="#333333" text="可用积分兑换"></u-text>
				</u-grid-item> -->
			</u-grid>
		</view>
		<u-gap height="100"></u-gap>
	</view>
	<u-tabbar value="user" activeColor="#d81e06">
		<u-tabbar-item text="首页" name="home" @click="onHomeClick">
			<template #active-icon>
				<image class="w-[20px] h-[20px]" src="/static/home_select.png"></image>
			</template>
			<template #inactive-icon>
				<image class="w-[20px] h-[20px]" src="/static/home.png"></image>
			</template>
		</u-tabbar-item>
		<u-tabbar-item text="二维码" name="qrcode" @click="onIntroduceClick" v-if="store.isLogin">
			<template #active-icon>
				<image class="w-[20px] h-[20px]" src="/static/qrcode.svg"></image>
			</template>
			<template #inactive-icon>
				<image class="w-[20px] h-[20px]" src="/static/qrcode.svg"></image>
			</template>
		</u-tabbar-item>
		<u-tabbar-item text="个人中心" name="user">
			<template #active-icon>
				<image class="w-[20px] h-[20px]" src="/static/user_select.png"></image>
			</template>
			<template #inactive-icon>
				<image class="w-[20px] h-[20px]" src="/static/user.png"></image>
			</template>
		</u-tabbar-item>
	</u-tabbar>
	<u-action-sheet @close="close(0)" closeOnClickOverlay safeAreaInsetBottom :show="modals[0]" title="绿色积分兑换为消费积分"
		round="8">
		<view class="h-[300px] px-[16px] pt-[10px]">
			<u-input v-model="modal0" clearable type="number" placeholder="请填写兑换积分"></u-input>
			<u-button @click="confirm(0)" class="mt-[20px]" text="兑换" size="large" shape="circle"
				color="#d81e06"></u-button>
		</view>
	</u-action-sheet>
	<u-action-sheet @close="close(1)" closeOnClickOverlay safeAreaInsetBottom :show="modals[1]" title="消费积分互转"
		round="8">
		<view class="h-[300px] px-[16px] pt-[10px]">
			<u-input v-model="modal1Account" clearable type="number" :readonly="readonly"  placeholder="请填写接受账号"></u-input>
			<u-input v-model="modal1" class="mt-[10px]" clearable type="number" placeholder="请填写积分"></u-input>
			<u-button @click="confirm(1)" class="mt-[20px]" text="提交" size="large" shape="circle"
				color="#d81e06"></u-button>
		</view>
	</u-action-sheet>
	<!-- <u-action-sheet @close="close(2)" closeOnClickOverlay safeAreaInsetBottom :show="modals[2]" title="将可用积分缩放150%兑换为红利积分" round="8">
		<view class="h-[300px] px-[16px] pt-[10px]">
			<u-input v-model="modal2" clearable type="number" placeholder="请填写兑换积分"></u-input>
			<u-button @click="confirm(2)" class="mt-[20px]" text="兑换" size="large" shape="circle" color="#d81e06"></u-button>
		</view>
	</u-action-sheet> -->
</template>

<script setup>
	import {
		nextTick,
		ref
	} from "vue";
	import * as api from "@/api.js";
	import * as uniapp from "@dcloudio/uni-app";
	import {
		useUserStore
	} from "@/store/config.js";

	uni.hideTabBar();
	const store = useUserStore();

	const modals = ref([false, false]);
	const modal0 = ref('');
	const modal1 = ref('');
	const modal1Account = ref('');
	const readonly = ref(false);
	
	//const modal2 = ref('');

	const close = i => {
		modals.value[i] = false;
	}


	uniapp.onShow(() => {
		console.log('onShow');
		if (store.isLogin) {
			getUserInfo();
		}
	})

	uniapp.onPullDownRefresh(() => {
		if (store.isLogin) {
			getUserInfo();
		} else {
			uni.stopPullDownRefresh();
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			})
		}
	})

	const getUserInfo = async () => {
		const result = await api.getUserInfo(store.user.UserID);
		uni.stopPullDownRefresh();
		if (result[1]) {
			uni.showToast({
				icon: 'none',
				title: result[1]
			})
		} else {
			store.user = result[0];
			store.save();
		}
	}

    const getCommendUserName = async code => {
    	//获取二维码里面的推荐人手机号
    	uni.showLoading();
    	const result = await api.getPhoneByCode(code);
    	uni.hideLoading();
    	if(result[0]) {
    		modals.value[1] = true;
			modal1Account.value=result[0];
			readonly.value=true;
    	} else {
    		await nextTick();
    		uni.showToast({
    			icon:'none',
    			title:result[1]
    		});
    	}
    }
	
	/* const getFunction = async () => {
		const result = await api.getFunction();
		if(result[1]) {
			uni.showToast({
				icon:'none',
				title:result[1]
			})
		} else {
			functions.value = result[0];
		}
	} */

	const confirm = async index => {
		if (index == 0) {
			if (!uni.$u.test.amount(modal0.value)) {
				uni.showToast({
					icon: 'none',
					title: '请填写正确的积分数值'
				})
				return
			}
			uni.showLoading();
			const result = await api.bonusExchange(store.user.UserID, modal0.value);
			uni.hideLoading();
			await nextTick();
			if (result[1]) {
				uni.showToast({
					icon: 'none',
					title: result[1]
				})
			} else {
				uni.showToast({
					icon: 'none',
					title: '转换成功'
				})
				close(index);
				getUserInfo();
			}
		} else if (index == 1) {
			if (!uni.$u.test.amount(modal1.value)) {
				uni.showToast({
					icon: 'none',
					title: '请填写正确的积分数值'
				})
				return
			}
			if (uni.$u.test.isEmpty(modal1Account.value)) {
				uni.showToast({
					icon: 'none',
					title: '请填写接收人账号'
				})
				return
			}
			uni.showLoading();
			const result = await api.bonusTransfer(store.user.UserID, {
				amount: modal1.value,
				userName: modal1Account.value
			});
			uni.hideLoading();
			await nextTick();
			if (result[1]) {
				uni.showToast({
					icon: 'none',
					title: result[1]
				})
			} else {
				uni.showToast({
					icon: 'none',
					title: '转让成功'
				})
				close(index);
				getUserInfo();
			}
		}
	}

	const toDetail = e => {
		if (store.isLogin) {
			switch (e) {
				case 0:
					uni.navigateTo({
						url: `/pages/fund/fund?type=1`
					})
					break;
				case 1:
					uni.navigateTo({
						url: `/pages/fund/fund?type=2`
					})
					break;
				case 2:
					uni.navigateTo({
						url: `/pages/fund/fund?type=3`
					})
					break;
				case 3:
					uni.navigateTo({
						url: `/pages/release/release`
					})
					break;
				default:
					break;
			}
		} else {
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			})
			toLogin();
		}
	}

	const onClick = e => {
		if (store.isLogin) {
			switch (e) {
				case 0:
					toOrder();
					break;
				case 1:
					toTeam();
					break;
				case 2:
					toFund();
					break;
				case 3:
					toAddress();
					break;
					/* case 4:
						toCard();
						break; */
				case 4:
					toRecharge();
					break;
				case 7:
				    //console.log('扫码注册');
				    toScan();
					break;
				case 8:
				    //收款码
					uni.navigateTo({
						url: `/pages/qrCode/qrCode`
					})
					break;
				case 9:
				    //扫码付款
					toPay();
				    break;
				default:
					console.log(e)
					modals.value[e - 5] = true;
					if(e==6){
						modal1.value = '';
						modal1Account.value = '';
						readonly.value=false;
					}
					break;
			}
		} else {
			if(e==7){
				toScan();
				return;
			}
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			})
			toLogin();
		}
	}
	
	const toScan = () => {
		uni.scanCode({
			scanType:['qrcode'],
			success(res) {
				if(res.result) {
					uni.navigateTo({
						url:`/pages/register/register?code=${res.result}`
					})
				}
			}
		})
	}
	
	//扫码付款
    const toPay=()=>{
		uni.scanCode({
			scanType:['qrcode'],
			success(res) {
				if(res.result) {
					getCommendUserName(res.result);
				}
			}
		})
	}
	
	const toLogin = () => {
		uni.navigateTo({
			url: `/pages/login/login`
		})
	}

	const toSetting = () => {
		uni.navigateTo({
			url: `/pages/setting/setting`
		})
	}

	const toOrder = () => {
		uni.navigateTo({
			url: `/pages/order/orderList`
		})
	}

	const toRecharge = () => {
		uni.navigateTo({
			url: `/pages/recharge/recharge`
		})
	}

	const toTeam = () => {
		uni.navigateTo({
			url: `/pages/team/team`
		})
	}

	const toAddress = () => {
		uni.navigateTo({
			url: `/pages/address/addressList`
		})
	}

	const toFund = () => {
		uni.navigateTo({
			url: `/pages/fund/fund`
		})
	}

	const toCard = () => {
		uni.navigateTo({
			url: `/pages/bankCard/bankCard`
		})
	}

	const getLevel = () => {
		switch (store.user.UserType) {
			case 0:
				return '普通';
			case 1:
				return '一星店';
			case 2:
				return '二星店';
			case 3:
				return '三星店';
			case 4:
				return '四星店';
			case 5:
				return '五星店';
			default:
				return '-';
		}
	}

	const onHomeClick = () => {
		uni.switchTab({
			url: `/pages/index/index`
		})
	}

	const onIntroduceClick = () => {
		uni.navigateTo({
			url: `/pages/introduce/introduce`
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-action-sheet__header__title {
		text-align: left;
		font-weight: normal;
	}

	::v-deep .u-count-num {
		margin-top: 10px;
	}
</style>